<template>
	<view class="page-container">
		<!-- 顶部场馆信息 -->
		<view class="venue-header">
			<image class="venue-image"
				src="https://ai-public.mastergo.com/ai/img_res/c3edc032f30b76c27968a8eb67fbee7f.jpg"
				mode="aspectFill" />
			<view class="venue-info">
				<view class="venue-name">
					<uni-text class="title">{{currentVenue.name}}</uni-text>
					<uni-tag :text="currentVenue.status" :type="currentVenue.status === '营业中' ? 'success' : 'warning'"
						size="small" />
				</view>
				<uni-text class="address">{{currentVenue.address}}</uni-text>
			</view>
			<view class="switch-venue-btn" @click="showVenueSelect">
				<uni-icons type="right" size="14" color="#666666" />
			</view>
		</view>
		<!-- 核心数据看板 -->
		<view class="data-board">
			<view class="data-card combined-card" :style="{ '--percentage': coreData.usageRate }">
				<view class="combined-info">
					<view class="combined-item">
						<uni-text class="combined-label">总可售片数</uni-text>
						<uni-text class="combined-value">{{coreData.totalCourts}}</uni-text>
					</view>
					<view class="combined-item">
						<uni-text class="combined-label">已订片数</uni-text>
						<uni-text class="combined-value">{{coreData.bookedCourts}}</uni-text>
					</view>
					<view class="combined-item">
						<uni-text class="combined-label">预定率</uni-text>
						<uni-text class="combined-value">{{coreData.usageRate}}%</uni-text>
					</view>
				</view>
				<view class="gauge-scale"></view>
				<view class="gauge-labels">
					<uni-text>0%</uni-text>
					<uni-text>100%</uni-text>
				</view>
			</view>
		</view>
		<!-- 今日实时数据 -->
		<view class="today-stats">
			<view class="today-card">
				<view class="today-header-container">
					<uni-text class="today-header">今日实时数据</uni-text>
					<view class="today-header-right">
						<uni-text class="update-time">更新于 12:30</uni-text>
						<uni-icons type="reload" size="18" color="#666666" class="refresh-icon"
							@click="handleRefresh" />
					</view>
				</view>
				<view class="today-items">
					<view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">订场数量</uni-text>
							<view class="stat-compare">
								<uni-icons :type="todayData.bookingTrend > 0 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.bookingTrend > 0 ? '#07c160' : '#ee0a24'" />
								<uni-text
									:class="['trend-text', todayData.bookingTrend > 0 ? 'up' : 'down']">{{Math.abs(todayData.bookingTrend)}}%</uni-text>
							</view>
						</view>
						<uni-text class="item-value">{{todayData.bookings}}</uni-text>
					</view>
					<view class="divider"></view>
					<view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">订场率</uni-text>
							<view class="stat-compare">
								<uni-icons :type="todayData.bookingRateTrend > 0 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.bookingRateTrend > 0 ? '#07c160' : '#ee0a24'" />
								<uni-text
									:class="['trend-text', todayData.bookingRateTrend > 0 ? 'up' : 'down']">{{Math.abs(todayData.bookingRateTrend)}}%</uni-text>
							</view>
						</view>
						<uni-text class="item-value">{{todayData.bookingRate}}%</uni-text>
					</view>
					<view class="divider"></view>
					<view class="today-item">
						<view class="item-header">
							<uni-text class="item-title">核销率</uni-text>
							<view class="stat-compare">
								<uni-icons :type="todayData.verificationTrend > 0 ? 'arrow-up' : 'arrow-down'" size="14"
									:color="todayData.verificationTrend > 0 ? '#07c160' : '#ee0a24'" />
								<uni-text
									:class="['trend-text', todayData.verificationTrend > 0 ? 'up' : 'down']">{{Math.abs(todayData.verificationTrend)}}%</uni-text>
							</view>
						</view>
						<uni-text class="item-value">{{todayData.verificationRate}}%</uni-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单来源分布 -->
		<view class="order-source">
			<view class="source-title">
				<uni-text class="title-text">订单来源分布</uni-text>
				<view class="source-select" @click="showSourceSelect">
					<uni-text class="selected-source">{{sourceTabs[sourceTabIndex].text}}</uni-text>
					<uni-icons type="bottom" size="14" color="#666666" />
				</view>
			</view>
			<view class="source-list">
				<view class="source-content">
					<view class="source-circle-chart">
						<view v-for="(item, index) in orderSources" :key="index"
							:class="['circle-segment', `circle-segment-${index}`]"></view>
						<view class="circle-center">
							<uni-text>共计</uni-text>
							<uni-text>{{orderSources.reduce((sum, item) => sum + item.count, 0)}}笔</uni-text>
							<uni-text class="circle-center-bottom">总可售片数：{{coreData.totalCourts}}</uni-text>
						</view>
					</view>
					<view class="source-list-container">
						<view class="source-item" v-for="(item, index) in orderSources" :key="index">
							<view class="source-left">
								<view :class="['source-dot', `source-dot-${index}`]"></view>
								<uni-text class="source-name">{{item.name}}</uni-text>
								<uni-text class="source-percent">{{item.percent}}%</uni-text>
							</view>
							<view class="source-right">
								<uni-text class="source-count">{{item.count}}笔</uni-text>
								<uni-icons type="right" size="14" color="#666666" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订场率分析 -->
		<view class="analysis-section">
			<view class="section-header">
				<uni-text class="section-title">订场率分析</uni-text>
				<view class="period-tabs">
					<uni-tag v-for="(tab, index) in periodTabs" :key="index" :text="tab.text"
						:type="currentPeriod === tab.value ? 'primary' : ''" @click="handlePeriodChange(tab.value)" />
				</view>
			</view>
			<view class="chart-container">
				<!-- 此处应为图表组件 -->
				<view class="chart-placeholder">图表区域</view>
			</view>
			<!-- 场地数据卡片 -->
			<view class="court-cards">
				<view class="court-card" v-for="(court, index) in courtStats" :key="index"
					@click="handleCourtClick(court)">
					<image class="court-image" :src="court.image" mode="aspectFill" />
					<view class="court-info">
						<view class="court-name-wrap">
							<uni-text class="court-name">{{court.name}}</uni-text>
							<view class="name-right">
								<view class="booking-trend">
									<uni-text class="trend-label">较上期</uni-text>
									<view class="trend-value">
										<uni-icons :type="court.trend > 0 ? 'arrow-up' : 'arrow-down'" size="14"
											:color="court.trend > 0 ? '#07c160' : '#ee0a24'" />
										<uni-text
											:class="['trend-text', court.trend > 0 ? 'up' : 'down']">{{Math.abs(court.trend)}}%</uni-text>
									</view>
								</view>
								<uni-icons type="eye" size="16" color="#666666" />
							</view>
						</view>
						<view class="court-booking">
							<view class="booking-item">
								<uni-text class="booking-label">总可售片数</uni-text>
								<uni-text class="booking-value">{{court.totalSlots}}</uni-text>
							</view>
							<view class="booking-item">
								<uni-text class="booking-label">已订片数</uni-text>
								<uni-text class="booking-value">{{court.bookedSlots}}</uni-text>
							</view>
							<view class="booking-item">
								<uni-text class="booking-label">订场率</uni-text>
								<uni-text class="booking-value">{{court.bookingRate}}%</uni-text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订场来源分析 -->
		<view class="source-analysis">
			<view class="section-header">
				<uni-text class="section-title">订场来源分析</uni-text>
				<uni-icons type="download" size="20" color="#666" @click="handleExport" />
			</view>
			<view class="chart-container">
				<!-- 此处应为环形图组件 -->
				<view class="chart-placeholder">环形图区域</view>
			</view>
		</view>
	</view>
</template>
<script>
	// import { ref, reactive, computed } from 'vue';
	// const selectedVenue = ref('1');
	// const currentPeriod = ref('week');
	// const currentVenue = reactive({
	// 	name: '阳光体育中心',
	// 	status: '营业中',
	// 	address: '广州市天河区体育西路123号'
	// });
	// const venueOptions = [
	// 	{ value: '1', text: '阳光体育中心' },
	// 	{ value: '2', text: '星光体育馆' },
	// 	{ value: '3', text: '市民运动中心' }
	// ];
	// const coreData = reactive({
	// 	totalCourts: 24,
	// 	bookedCourts: 18,
	// 	usageRate: 75
	// });
	// const todayData = reactive({
	// 	bookings: 156,
	// 	bookingTrend: 12,
	// 	bookingRate: 68,
	// 	bookingRateTrend: -5,
	// 	verificationRate: 92,
	// 	verificationTrend: 8
	// });
	// const periodTabs = [
	// 	{ text: '本周', value: 'week' },
	// 	{ text: '本月', value: 'month' },
	// 	{ text: '本季', value: 'quarter' },
	// 	{ text: '本年', value: 'year' },
	// 	{ text: '自定义', value: 'custom' }
	// ];
	// const showVenueSelect = () => {
	// 	uni.showActionSheet({
	// 		itemList: venueOptions.map(item => item.text),
	// 		success: (res) => {
	// 			selectedVenue.value = venueOptions[res.tapIndex].value;
	// 			console.log('切换场馆:', selectedVenue.value);
	// 		}
	// 	});
	// };
	// const showSourceSelect = () => {
	// 	uni.showActionSheet({
	// 		itemList: sourceTabs.map(item => item.text),
	// 		success: (res) => {
	// 			handleSourceTabClick({ currentIndex: res.tapIndex });
	// 		}
	// 	});
	// };
	// const courtStats = reactive([
	// 	{
	// 		name: '羽毛球场',
	// 		image: 'https://ai-public.mastergo.com/ai/img_res/18c22c0d267fd04e36a4e4c7ed5036c9.jpg',
	// 		totalSlots: 120,
	// 		bookedSlots: 98,
	// 		bookingRate: 82,
	// 		trend: 5
	// 	},
	// 	{
	// 		name: '篮球场',
	// 		image: 'https://ai-public.mastergo.com/ai/img_res/4894758272fc1a2a9ae064fcc32d530a.jpg',
	// 		totalSlots: 80,
	// 		bookedSlots: 65,
	// 		bookingRate: 81,
	// 		trend: -2
	// 	},
	// 	{
	// 		name: '网球场',
	// 		image: 'https://ai-public.mastergo.com/ai/img_res/ff66aa699e0a32c48b0b91205aaabb7c.jpg',
	// 		totalSlots: 60,
	// 		bookedSlots: 45,
	// 		bookingRate: 75,
	// 		trend: 8
	// 	}
	// ]);
	// const handlePeriodChange = (period : string) => {
	// 	currentPeriod.value = period;
	// };
	// const handleExport = () => {
	// 	console.log('导出数据');
	// };
	// const handleCourtClick = (court : any) => {
	// 	// 生成场地预订明细数据
	// 	const courtDetails = Array.from({ length: court.totalSlots }, (_, index) => {
	// 		const hour = Math.floor(index / 4) + 9; // 从早上9点开始
	// 		const minute = (index % 4) * 15;
	// 		const timeSlot = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
	// 		// 随机生成预订状态，实际项目中应该从后端获取
	// 		const isBooked = index < court.bookedSlots;
	// 		const status = isBooked ? '已预订' : '可预订';
	// 		const statusStyle = isBooked ? 'color: #ee0a24;' : 'color: #07c160;';
	// 		return `${timeSlot}  ${status}\n`;
	// 	}).join('');
	// 	uni.showModal({
	// 		title: `${court.name}场地预订明细`,
	// 		content: `今日预订情况：\n\n${courtDetails}\n总订场率：${court.bookingRate}%\n预订趋势：${court.trend > 0 ? '上升' : '下降'}${Math.abs(court.trend)}%`,
	// 		showCancel: false,
	// 		confirmText: '我知道了',
	// 		success: (res) => {
	// 			if (res.confirm) {
	// 				console.log('用户查看了场地明细');
	// 			}
	// 		}
	// 	});
	// };
	// const orderSourcesData = reactive({
	// 	channel: [
	// 		{
	// 			name: '小程序',
	// 			count: 124,
	// 			percent: 41
	// 		},
	// 		{
	// 			name: '电脑端',
	// 			count: 95,
	// 			percent: 32
	// 		},
	// 		{
	// 			name: '手机端',
	// 			count: 81,
	// 			percent: 27
	// 		}
	// 	],
	// 	venue: [
	// 		{
	// 			name: '羽毛球场',
	// 			count: 150,
	// 			percent: 50
	// 		},
	// 		{
	// 			name: '篮球场',
	// 			count: 90,
	// 			percent: 30
	// 		},
	// 		{
	// 			name: '网球场',
	// 			count: 60,
	// 			percent: 20
	// 		}
	// 	],
	// 	payment: [
	// 		{
	// 			name: '微信支付',
	// 			count: 150,
	// 			percent: 50
	// 		},
	// 		{
	// 			name: '支付宝',
	// 			count: 90,
	// 			percent: 30
	// 		},
	// 		{
	// 			name: '现金支付',
	// 			count: 30,
	// 			percent: 10
	// 		},
	// 		{
	// 			name: '银联支付',
	// 			count: 30,
	// 			percent: 10
	// 		}
	// 	],
	// 	timeSlot: [
	// 		{
	// 			name: '早场',
	// 			count: 95,
	// 			percent: 32
	// 		},
	// 		{
	// 			name: '午场',
	// 			count: 124,
	// 			percent: 41
	// 		},
	// 		{
	// 			name: '晚场',
	// 			count: 81,
	// 			percent: 27
	// 		}
	// 	]
	// });
	// const orderSources = computed(() => orderSourcesData[currentSourceTab.value]);
	// const sourceTabIndex = ref(0);
	// const sourceTabs = [
	// 	{ text: '球馆类型', value: 'venue' },
	// 	{ text: '来源渠道', value: 'channel' },
	// 	{ text: '支付方式', value: 'payment' },
	// 	{ text: '订场时段', value: 'timeSlot' }
	// ];
	// const currentSourceTab = computed(() => sourceTabs[sourceTabIndex.value].value);
	// const handleSourceTabClick = (e : { currentIndex : number }) => {
	// 	sourceTabIndex.value = e.currentIndex;
	// 	updateCircleSegments();
	// };
	// const updateCircleSegments = () => {
	// 	const sources = orderSources.value;
	// 	let startPercent = 0;
	// 	sources.forEach((source, index) => {
	// 		const element = document.querySelector(`.circle-segment-${index}`) as HTMLElement;
	// 		if (element) {
	// 			element.style.background = `conic-gradient(transparent ${startPercent}%, ${getSegmentColor(index)} ${startPercent}% ${startPercent + source.percent}%)`;
	// 			startPercent += source.percent;
	// 		}
	// 	});
	// };
	// const getSegmentColor = (index : number) => {
	// 	const colors = ['#4080FF', '#36CFC9', '#73D13D', '#FF7A45'];
	// 	return colors[index] || colors[0];
	// };
	// const handleRefresh = () => {
	// 	console.log('刷新数据');
	// };
</script>
<style>
	page {
		height: 100%;
	}

	.page-container {
		min-height: 100%;
		padding: 30rpx;
		background-color: #f5f6f7;
	}

	.venue-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 12px;
	}

	.venue-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8px;
		object-fit: cover;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.venue-info {
		position: relative;
		z-index: 2;
	}

	.switch-venue-btn {
		position: relative;
		z-index: 2;
	}

	.switch-venue-btn {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		background-color: #f5f6f7;
		border-radius: 8px;
		cursor: pointer;
	}

	.venue-info {
		flex: 1;
	}

	.venue-name {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-right: 20rpx;
		color: #333333;
	}

	.address {
		font-size: 14px;
		color: #666666;
	}

	.data-board {
		margin-bottom: 30rpx;
	}

	.data-card {
		background-color: #ffffff;
		border-radius: 12px;
		position: relative;
		padding: 40rpx;
	}

	.combined-card {
		background: #ffffff;
		overflow: hidden;
	}

	.combined-card::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
	}

	.combined-card::after {
		content: '';
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		width: 4rpx;
		height: 100rpx;
		background: #333333;
		transform-origin: bottom center;
		transform: rotate(calc((var(--percentage) - 50) * 1.8deg)) translateX(-50%);
		border-radius: 4rpx;
		transition: transform 0.3s ease;
		z-index: 2;
	}

	.combined-card .gauge-scale {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 200rpx;
		height: 100rpx;
		border-radius: 200rpx 200rpx 0 0;
		border: 2px solid #E5E7EB;
		border-bottom: none;
	}

	.combined-card .gauge-scale::before,
	.combined-card .gauge-scale::after {
		content: '';
		position: absolute;
		bottom: 0;
		width: 2px;
		height: 10rpx;
		background: #333333;
	}

	.combined-card .gauge-scale::before {
		left: 0;
		transform: rotate(-90deg) translateX(5rpx);
	}

	.combined-card .gauge-scale::after {
		right: 0;
		transform: rotate(90deg) translateX(-5rpx);
	}

	.combined-card .gauge-labels {
		position: absolute;
		bottom: 40rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 80rpx;
		color: #666666;
		font-size: 12px;
	}

	.combined-info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		z-index: 1;
		margin-bottom: 220rpx;
	}

	.combined-item {
		text-align: center;
	}

	.combined-label {
		display: block;
		font-size: 14px;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.combined-value {
		display: block;
		font-size: 24px;
		font-weight: bold;
		color: #333333;
	}

	.combined-card::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: #f8f9fa;
		border-radius: 0 0 12px 12px;
	}

	.combined-card::after {
		content: '';
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		width: 4rpx;
		height: 100rpx;
		background: #333333;
		transform-origin: bottom center;
		transform: rotate(calc(var(--percentage) * 1.8deg)) translateX(-50%);
		border-radius: 4rpx;
		transition: transform 0.3s ease;
	}

	.today-stats {
		margin-bottom: 30rpx;
	}

	.today-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx;
	}

	.today-header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.today-header {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.today-header-right {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.update-time {
		font-size: 12px;
		color: #999999;
	}

	.refresh-icon {
		cursor: pointer;
	}

	.today-items {
		display: flex;
		justify-content: space-between;
	}

	.today-item {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.item-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.item-title {
		font-size: 14px;
		color: #666666;
		margin-right: 10rpx;
	}

	.item-value {
		display: block;
		font-size: 20px;
		font-weight: bold;
		color: #333333;
	}

	.divider {
		width: 1px;
		height: 60rpx;
		background-color: #e5e5e5;
		margin: auto 30rpx;
	}

	.stat-compare {
		display: flex;
		align-items: center;
	}

	.trend-text {
		margin-left: 8rpx;
		font-size: 14px;
	}

	.trend-text.up {
		color: #07c160;
	}

	.trend-text.down {
		color: #ee0a24;
	}

	.order-source {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.source-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.source-select {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 12rpx 24rpx;
		background-color: #f5f6f7;
		border-radius: 8px;
		cursor: pointer;
	}

	.selected-source {
		font-size: 14px;
		color: #333333;
	}

	.period-tabs {
		display: flex;
		gap: 20rpx;
	}

	.title-text {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.total-orders {
		font-size: 14px;
		color: #999999;
	}

	.source-content {
		display: flex;
		align-items: flex-start;
		gap: 40rpx;
	}

	.source-circle-chart {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
	}

	.circle-segment {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.circle-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #666666;
	}

	.circle-center-bottom {
		position: absolute;
		bottom: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		font-size: 12px;
		color: #666666;
	}

	.circle-segment-0 {
		background: conic-gradient(#4080FF 0% 32%);
	}

	.circle-segment-1 {
		background: conic-gradient(transparent 0% 32%, #36CFC9 32% 73%);
	}

	.circle-segment-2 {
		background: conic-gradient(transparent 0% 73%, #73D13D 73% 90%);
		display: block;
	}

	.circle-segment-3 {
		background: conic-gradient(transparent 0% 90%, #FF7A45 90% 100%);
		display: block;
	}

	.source-list-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.source-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.source-dot-0 {
		background-color: #4080FF;
	}

	.source-dot-1 {
		background-color: #36CFC9;
	}

	.source-dot-2 {
		background-color: #73D13D;
	}

	.source-dot-3 {
		background-color: #FF7A45;
	}

	.source-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8px;
	}

	.source-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.source-name {
		font-size: 14px;
		color: #333333;
	}

	.source-percent {
		font-size: 14px;
		color: #666666;
	}

	.source-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.source-count {
		font-size: 14px;
		color: #666666;
	}

	.analysis-section,
	.source-analysis {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.period-tabs {
		display: flex;
		gap: 20rpx;
	}

	.chart-container {
		width: 100%;
		height: 600rpx;
		margin-bottom: 30rpx;
	}

	.court-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.court-card {
		display: flex;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12px;
		gap: 20rpx;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.court-card:active {
		opacity: 0.8;
		transform: scale(0.98);
	}

	.court-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8px;
		object-fit: cover;
		flex-shrink: 0;
	}

	.court-info {
		flex: 1;
	}

	.court-name-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.court-name {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.name-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.court-booking {
		display: flex;
		gap: 40rpx;
		margin-bottom: 20rpx;
	}

	.booking-item {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.booking-label {
		font-size: 12px;
		color: #666666;
	}

	.booking-value {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.booking-trend {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.trend-label {
		font-size: 12px;
		color: #666666;
	}

	.trend-value {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.trend-text {
		font-size: 14px;
	}

	.trend-text.up {
		color: #07c160;
	}

	.trend-text.down {
		color: #ee0a24;
	}

	.chart-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f8f9fa;
		color: #999999;
		font-size: 14px;
		border-radius: 8px;
	}
</style>